<template>
  <footer>
    <div class="footer-nav">
      <NuxtLink to="/" class="logo">
        <img src="~/assets/logo-black.png" alt="">
      </NuxtLink>
      <div class="navs">
        <NuxtLink :to="item.link" class="navs-item" v-for="(item,index) in state.navList">{{ item.title }}</NuxtLink>
      </div>
    </div>
    <div class="footer-contact">
      <div class="ft-contact-item">
        <div class="icon">
          <img src="~/assets/icons/ft-tel.png" alt="">
        </div>
        <div class="info">
          <div class="label">商务咨询热线</div>
          <div class="more heavy">13816452292</div>
        </div>
      </div>
      <div class="ft-contact-item" v-for="i in 3">
        <div class="icon">
          <img src="~/assets/icons/ft-local.png" alt="">
        </div>
        <div class="info">
          <div class="label">北京</div>
          <div class="more">上海市普陀区中江路879号天地软件园 25号楼3楼</div>
        </div>
      </div>
    </div>
    <div class="ft-anywhere">您在哪里我们的服务就在哪里，全国范围内支持上门洽谈。</div>
    <div class="footer-copyright">Copyright @ 2006-2022 Symbol Technology Co., LTD. All Rights Reserved.</div>
  </footer>
</template>

<script setup lang="ts">
const state = reactive({
  navList: [
    {
      title: '首页',
      link: '/',
      value: '/'
    },
    {
      title: '关于我们',
      link: '/about',
      value: 'about'
    },
    {
      title: '产品服务',
      link: '/product',
      value: 'product'
    },
    {
      title: '作品案例',
      link: '/works',
      value: 'works',
    },
    {
      title: '团队成员',
      link: '/team',
      value: 'team'
    },
    {
      title: '新闻动态',
      link: '/news',
      value: 'news'
    },
    {
      title: '联系我们',
      link: '/contact',
      value: 'contact'
    }
  ],
});
</script>

<style lang="scss">
footer {
  width: 24rem;
  padding: 0 1.3rem 0 1.33rem;
  border-top: 0.02rem solid #D5D5D5;;

  .footer-nav {
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.01rem solid #ddd;
    padding-right: 0.34rem;
    padding-left: 0.33rem;

    .logo {
      img {
        width: 2.61rem;
        height: 0.74rem;
      }
    }

    .navs {
      display: flex;

      .navs-item {
        font-size: 0.28rem;
        margin-right: 0.665rem;

        &:first-child {
          margin-right: 0.84rem;
        }

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          font-weight: 500;
        }
      }
    }
  }

  .footer-contact {
    height: 4.18rem;
    display: flex;
    align-items: center;

    .ft-contact-item {
      width: 5.66rem;
      display: flex;

      .icon {
        width: 0.66rem;
        height: 0.66rem;
        background: #ECECEC;
        border-radius: 50%;
        margin-right: 0.34rem;
        img{
          width: 0.66rem;
          height: 0.66rem;
        }
      }

      .info {
        .label{
          margin-bottom: 0.11rem;
          font-size: 0.2rem;
        }
        .more {
          width: 3.74rem;
          line-height: 0.35rem;
          font-size: 0.23rem;
          &.heavy{
            font-size: 0.38rem;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }
  }
  .ft-anywhere{
    font-size: 0.23rem;
    font-weight: 500;
    color: #333333;
    line-height: 0.23rem;
    padding-bottom: 0.44rem;
    border-bottom: 0.01rem solid #ddd;

  }
  .footer-copyright{
    height: 0.97rem;
    font-size: 0.2rem;
    font-weight: 400;
    line-height: 0.97rem;
    color: #333333;
  }
}
</style>
